<!--
 * @Description:
 * @Version: 1.0
 * @Author: liguansheng
 * @Date: 2022-08-05 11:00:49
 * @LastEditors: liguansheng
 * @LastEditTime: 2022-09-15 09:28:51
-->
<template>
  <Drawer :with-header="false" @open="init">
    <el-scrollbar v-loading="isLoading" max-height="100%">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="originalValue" prop="originalValue" />
        <el-table-column label="newValue" prop="newValue" />
        <el-table-column label="propertyName" prop="propertyName" width="140" />
        <el-table-column
          label="propertyTypeFullName"
          prop="propertyTypeFullName"
          width="180"
        />
      </el-table>
    </el-scrollbar>
  </Drawer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import Drawer from '@/components/Drawer/index.vue'
import { getEntityChange } from '@/http/entityChangeLog'
import { IPropertyChange } from '@/http/types/entityChangeLog'

const props = defineProps({
  entityChangeId: {
    type: String,
    default: '',
  },
})

const isLoading = ref(false)
const tableData = ref<IPropertyChange[]>([])

const init = async () => {
  const res = await getEntityChange(props.entityChangeId)
  tableData.value = res.entityChange.propertyChanges
}
</script>

<style lang="scss" scoped></style>
